<template>
    <div class="layerRtb layerRtb-threecolumn">
        <three-title :title="{name:'身份证'}"></three-title>
        <div class="layerRtb-scroll thinScroll" v-scrollHeight="437">
            <div class="analyItem">
                <p class="analyItemTit tx-center">身份证</p>
                <div class="analyItemCon">
                    <div class="col-md-6">
                        <!-- 正面 -->
                        <span  class="cLightGray col-md-12">身份证正面</span>
                            <rx-upload :data="{id: 11,attrModelid:9}" :init="{class: 1, mime: 1,multi:true}" :elStyle="{width:'80px', height: '58px'}" @success="successUpload">
                                <div class="fl uiImgUpload uiImgUpload-gblock mr10 ">
                                    <a href="javascript:">
                                        <span type="file" value="" class="file"></span>
                                        <em class="bgIcon file-ico"></em>
                                    </a>
                                </div>
                            </rx-upload>
                            <rx-viewer :images="positiveUrlList" class="fl mt20 pb20">
                                <div class="clearfix">
                                    <div v-for="(item, index) of positiveUrlList" :key="index" class="fl mr10 look_imgHover fl relative tx-center"  style="width:78px;height:78px;">
                                        <img :src="item.url | smallImg(80, 80)" :alt="index">
                                        <div class="upload_finish_div">
                                        <div class="upload_finish_bg"></div>
                                        <div class="upload_finish_linksm">
                                            <div class="dis-il-block">
                                                <a href="javascript:" class="ImgBtn enlarge_viewer enlarge_link" :data-src="item"></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="imgInfo tx-center">身份证正面</div>
                                      <input type="button" class="uiBtn-small uiBtn-red " value="删除">
                                    </div>
                                </div>
                            </rx-viewer>
                            <!-- <rx-upload
                                class="fl"
                                :data="{id: 11}" :init="{class: 7, mime: 1}"
                                :elStyle="{width:'90px', height: '80px'}" @success="successUpload">
                                <div class="fl uiImgUpload uiImgUpload-gblock mr10">
                                    <a href="javascript:">
                                        <span type="file" value="" class="file"></span>
                                        <em class="bgIcon file-ico"></em>
                                    </a>
                                </div>
                            </rx-upload> -->
                            <!-- <rx-viewer class="mr10 fl"  :images="evalImgArray"> -->
                                <!-- <div v-for="(item,index) of perImgList" :key="index"  class="look_imgHover fl relative" style="width:78px;height:78px;" > -->
                                    <!-- <img  :src="item" /> -->
                            <!-- <rx-viewer class="mr10 fl" >
                                <div class="look_imgHover relative" style="width:78px;height:78px;" >
                                    <img  :src="this.stageInfo.identity_positive"/>
                                    <div class="upload_finish_div">
                                        <div class="upload_finish_bg"></div>
                                        <div class="upload_finish_linksm">
                                            <div class="dis-il-block">
                                                <a href="javascript:" class="ImgBtn enlarge_viewer enlarge_link" :data-src="item"></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="imgInfo tx-center">身份证正面</div>
                                </div>
                            </rx-viewer> -->
                    </div>
                    <div class="col-md-6">
                        <!-- @success="successUpload" -->
                            <span  class="cLightGray col-md-12">身份证反面</span>
                            <!-- <rx-upload
                                class="fl"
                                :data="{id: 11}" :init="{class: 7, mime: 1}"
                                :elStyle="{width:'90px', height: '80px'}"
                            >
                                <div class="fl uiImgUpload uiImgUpload-gblock mr10">
                                    <a href="javascript:">
                                        <span type="file" value="" class="file"></span>
                                        <em class="bgIcon file-ico"></em>
                                    </a>
                                </div>
                            </rx-upload> -->
                            <!-- <rx-viewer class="mr10 fl"  :images="evalImgArray">
                                <div v-for="(item,index) of evalImgArray" :key="index"  class="look_imgHover fl relative" style="width:78px;height:78px;" >
                                <img  :src="item" /> -->
                            <!-- <rx-viewer class="mr10 fl" >
                                <div class="look_imgHover relative" style="width:78px;height:78px;" >
                                            <img  :src="this.stageInfo.identity_opposite"/>
                                    <div class="upload_finish_div">
                                        <div class="upload_finish_bg"></div>
                                        <div class="upload_finish_linksm">
                                            <div class="dis-il-block">
                                                <a href="javascript:" class="ImgBtn enlarge_viewer enlarge_link" :data-src="item"></a>
                                            </div>
                                        </div>
                                    </div>
                                                <div class="imgInfo tx-center">身份证反面</div>
                                </div>
                            </rx-viewer> -->

                            <!-- 反面 -->
                            <rx-upload :data="{id: 11,attrModelid:8}" :init="{class: 1, mime: 1,multi:true}" :elStyle="{width:'80px', height: '58px'}" @success="successUpload">
                                <div class="fl uiImgUpload uiImgUpload-gblock mr10 ">
                                    <a href="javascript:">
                                        <span type="file" value="" class="file"></span>
                                        <em class="bgIcon file-ico"></em>
                                    </a>
                                </div>
                            </rx-upload>
                            <rx-viewer :images="oppositeUrlList" class="fl mt20 pb20">
                                <div class="clearfix">
                                    <div v-for="(item, index) of oppositeUrlList" :key="index" class="fl mr10 look_imgHover fl relative tx-center"  style="width:78px;height:78px;">
                                        <img :src="item.url | smallImg(80, 80)" :alt="index">
                                        <div class="upload_finish_div">
                                        <div class="upload_finish_bg"></div>
                                        <div class="upload_finish_linksm">
                                            <div class="dis-il-block">
                                                <a href="javascript:" class="ImgBtn enlarge_viewer enlarge_link" :data-src="item"></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="imgInfo tx-center">身份证反面</div>
                                      <input type="button" class="uiBtn-small uiBtn-red " value="删除">
                                    </div>
                                </div>
                            </rx-viewer>
                    </div>
                </div>
            </div>
                <div class="analyItem">
                        <p class="analyItemTit tx-center">身份证号</p>
                        <div class="analyItemCon"  v-if="flg==1">
                            <p class="col-md-4">
                                <span class="cLightGray pr8">身份证号</span>
                                <span name="idCardName">{{ idCardStr }}</span>
                                </p>
                            <div class="imgbox imgbox1 col-md-3" style="margin-top: 15px;">
                                <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/edit_img.png" title="编辑" width="20" class="fr pointer mr5" @click="flg=0">
                            </div>
                        </div>
                        <div class="analyItemCon" v-else>
                                <div class="textBoxtxt hide" style="display: block;">
                                            <p class="col-md-6">
                                                <span class="cLightGray pr8" >身份证号</span>
                                                <input type="text" class="width120 evaluateStandard" name="set_idCardName_education" style="width: 200px;" v-model="idCardStr">
                                            </p>
                                    </div>
                                <div class="imgbox imgbox2 " style="margin-top: 15px;">
                                    <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/save_img.png" title="保存" width="20" class="fl pointer mr5" name="update_stage_info_intention" @click="updateIDCard()">
                                    <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/goback_img.png" title="返回" width="20" class="fl pointer mr5" @click="flg=1">
                                </div>
                        </div>
                </div>
        </div>

        <div class="layerRtb-footer">
              <div class="analyItem">
                <p class="analyItemTit tx-center">综合</p>
                <div class="analyItemCon">
                </div>
            </div>
        </div>
          <transition-group class="animated faster" enter-active-class="animated faster slideInRight" leave-active-class="animated faster slideOutRight">
         </transition-group>
    </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { findIDCard, updateIDCard, savePhotoByUid, findPhotoByUid } from '../../Resources/Api/index'
export default {
    components: {
    },
    data () {
        return {
            flg: 1,
            stageInfo: {}, // 用户信息
            idCardStr: '', // 省份证号
            oppositeUrlList: [], // 身份证反面
            positiveUrlList: [] // 身份证正面
        }
    },
    created () {
        // this.stageInfo = this.$route.query.stageInfo
        // this.identity_positive = this.stageInfo.identity_positive
        // this.identity_opposite = this.stageInfo.identity_opposite
        this.findIDCard()
        this.findPhotoByUid()
        this.findPhotoByUids()
        // alert(this.idCardStr)
    },
    methods: {
        ...mapMutations({
            setUpdatePlate: `SET_UPDATE_PLATE`
        }),
        // 身份证照片上传
        successUpload (value) {
            if (Number(value.data.attrModelid) === 9) {
                // 正面照片
                if (Number(this.positiveUrlList.length) > 0) {
                    layer.msg('身份证照片不能保存多张')
                    return
                }
            }
            if (Number(value.data.attrModelid) === 8) {
                // 反面照片
                if (Number(this.oppositeUrlList.length) > 0) {
                    layer.msg('身份证照片不能保存多张')
                    return
                }
            }
            savePhotoByUid({
                uid: this.leftInfo.uid,
                attrModelid: value.data.attrModelid,
                userType: 1,
                attrServerUrl: '',
                attrFileUrl: value.src
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    // this.updateStageInfo()
                    this.$message('上传成功')
                    this.setUpdatePlate()
                    if (Number(value.data.attrModelid) === 9) {
                        // 正面
                        // this.identity_positive = value.src
                        // this.updateStageInfoOpposite()
                        this.findPhotoByUid()
                    }
                    if (Number(value.data.attrModelid) === 8) {
                        // 反面
                        // this.identity_opposite = value.src
                        // this.updateStageInfoOpposite()
                        this.findPhotoByUids() // 反面
                    }
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 身份证照片正面回显
        findPhotoByUid () {
            // debugger
            findPhotoByUid({
                uid: this.leftInfo.uid,
                attrModelid: 9 // 正面
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.positiveUrlList = res.data.Body
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 身份证照片反面回显
        findPhotoByUids () {
            findPhotoByUid({
                uid: this.leftInfo.uid,
                attrModelid: 8 // 反面
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.oppositeUrlList = res.data.Body
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 查询身份证号
        findIDCard () {
            findIDCard({
                uid: this.leftInfo.uid // 用户id
            }).then(result => {
                if (Number(result.data.StatusCode) === 0) {
                    this.idCardStr = result.data.Body.idcard
                }
            }).catch(err => {
                console.log('查询用户身份证号失败，异常信息：' + err)
            })
        },
        // 更新身份证号
        updateIDCard () {
            updateIDCard({
                uid: this.leftInfo.uid, // 用户id
                IDCard: this.idCardStr // 省份证号
            }).then(result => {
                if (Number(result.data.StatusCode) === 0) {
                    layer.msg('修改成功')
                    this.$router.push(this.$route.matched[1].path)
                }
            }).catch(err => {
                console.log('修改身份证号失败updateIDCard，异常信息：' + err)
            })
        }
        // updateStageInfoByleId () {
        //     updateStageInfoByleId({
        //         uid: this.leftInfo.uid, // 用户id
        //         age: this.age, // 年龄
        //         isMarry: this.is_marry // 是否结婚，0-是，1-否
        //     }).then(result => {
        //         // debugger
        //         if (Number(result.data.StatusCode) === 0) {
        //             layer.msg('修改成功')
        //             this.$router.push(this.$route.matched[1].path)
        //         }
        //     }).catch(err => {
        //         console.log('认知阶段修改用户的年龄和婚姻状态失败，异常信息：' + err)
        //     })
        // }
    },
    computed: {
        ...mapGetters(['leftInfo'])
    },
    watch: {
    }
}

</script>
<style  scoped>
    .imgbox {
    position: absolute;
    right: 10px;
    top: 10px;
}
</style>
